<template>
	<div>
		<div class="graybg"></div>
		<div class="each_bg"><img src="../assets/eachbg.png"/></div>
		<!--头部-->
		<header id="header">
			<div class="header header_bg clearfix">
				<div class="header_left pull-left">
					<i class="iconfont baiColor" onclick="javascript:history.back(-1)">&#xe612;</i>
				</div>
				<div class="header_center baiColor">我的二维码</div>
				<div class="header_right baiColor" @click="share"><i class="iconfont">&#xe603;</i></div>
			</div>
		</header>
		<div class="main">
			<div class="code_main marginAuto">
				<div class="code_main_header">
					<img :src='portrait' alt="头像"/>
					
				</div>
				<div class="sid">
					<span>推广码ID:{{u_id}}</span>
				</div>
				<div class="code_img">
					<!--<img :src="imgURL+'/Home/User/inviteQrcode/token/'+info" alt="二维码"/>-->
					<img src="../assets/mycode.png"/>
				</div>
			</div>
		</div>
		
		<!--弹窗-->
		<!--=转账=-->
		<div class="keepOut" :class="{sharedata:shareshow}"></div>
		<div class="transferBlock" :class="{sharedata:shareshow}">
			<div class="transferBlock_header">
				<span>分享海报到</span>
			</div>
			<div class="transferBlock_main _width">
				<div class="transferBlock_each">
					<a class="jiathis_button_cqq">
					<h5><i class="iconfont">&#xe605;</i></h5>
					<p>QQ</p>
					</a>
				</div>
				<div class="transferBlock_each">
					<a class="jiathis_button_qzone">
					<h5><i class="iconfont">&#xe62e;</i></h5>
					<p>QQ空间</p>
					</a>
				</div>
				<div class="transferBlock_each">
					<a class="jiathis_button_weixin">
					<h5><i class="iconfont">&#xe660;</i></h5>
					<p>朋友圈</p>
					</a>
				</div>
				<div class="transferBlock_each">
					<a class="jiathis_button_copy">
					<h5><i class="iconfont">&#xe66d;</i></h5>
					<p>复制链接</p>
					</a>
				</div>
			</div>
			<div class="close button baiColor" @click="close">
				<span>取消分享</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				imgURL:this.imgURL,
				//二维码直接在页面中链接
				portrait:"",	//头像
				u_id:"",	//收款人id
				//控制分享显示隐藏
				shareshow:false,
				info:""
			}
		},
		mounted(){
			this.init();
			let _this = this;
			var arr = ['u_img','u_invite',];
			_this.info = window.localStorage.data;
			var info = window.localStorage.data;
			var params = new URLSearchParams();
			params.append('token', info);	//客户秘钥（信息）
			params.append('arr',arr);
			this.$axios({
			   url:"Home/Config/getUserField",
				method:"post",
				data:params
			  }).then(function(res){
			   	_this.u_id = res.data.data.u_invite;
				_this.portrait = res.data.data.u_img;	
			}).catch(function(err){
				console.log(err)		
			});
			
			
			
			
			
			
			
			
			
			
			
		},
		methods:{
//			分享部分
			init: function () {
			 	var _this= this;
			 	let url = 'https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js';
		        let script = document.createElement('script');
		        script.setAttribute('src','http://v3.jiathis.com/code/jia.js');
		        document.getElementsByTagName('head')[0].appendChild(script);
		  	},
			//分享
			share(){
				this.shareshow = true;
			},
			close(){
				this.shareshow = false;
			}
		}
	}
</script>
<style scoped="scoped">
	@import "../css/public.css";
	.header .header_right i{
		font-size: 18px;
	}
	.each_bg{
		position: fixed;
		width: 100%;
		height: 300px;
		z-index: -1;
	}
	.main{
		padding-top: 50px;
	}
	.code_main{
		width: 90%;
		height: 300px;
		background: #fff;
		border-radius: 8px;
	}
	.code_main_header{
		width:50px;
		height: 50px;
		margin: auto;
		padding-top: 30px;
	}
	.code_main_header img{
		width: 100%;
		height: 100%;
		border-radius: 8px;
	}
	.sid{
		font-size:14px;
		color: #033333;
		line-height: 30px;
		text-align: center;
		margin-bottom: 10px;
	}
	.code_img{
		width:150px;
		height: 150px;
		margin: auto;
		background:#F3961F;
	}
	.code_img img,.each_bg img{
		width: 100%;
		height: 100%;
	}
	/*弹窗*/
	.header{
		z-index: 100;
	}
	.keepOut{
		top: 0;
		z-index: 101;
	}
	.sharedata{
		display: block !important;
	}
	/*==*/
.transferBlock{
	position: fixed;
	z-index:102;
	bottom: 0;
	width: 90%;
	height:200px;
	left: 50%;
	margin-left: -45%;
	background: #fff;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	display: none;
}
.transferBlock_header{
	text-align: center;
	color: #F3961F;
	margin-top: 20px;
	font-size: 18px;
}
.transferBlock_main{
	margin: 30px 0;
	display: flex;
	justify-content: space-around;
}
.transferBlock_each{
	width: 40%;
}
.transferBlock_each h5{
	font-size: 20px;
	text-align: center;
}
.transferBlock_each h5 i{
	font-size: 30px;
	color:#F3961F;
}
.transferBlock_each p{
	font-size: 14px;
	color: #333333;
	line-height: 30px;
	text-align: center;
}
.close{
	background:#F3961F;
}
</style>